<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>数据库 {{.DbName}}</title>
		<style type="text/css">
		 table, th, td{
			 border-collapse:collapse;
			 border: 1px solid black;
		 }
		 
		 th{
			 background-color:#555;
			 color:#fff;
			 vertical-align:center;
		 }
		 
		 td{
			 text-align:left;
			 vertical-align:center;
			 padding:5px;
		 }
		 
		 caption{
			 padding:5px;
			 font-size:18px;
		 }
		 
		 h1{
			 padding:0px 0px 0px 40px;
			 background:url(/static/img/database22.png);
			 background-size:38px 38px;
			 background-repeat:no-repeat;
		 }
		 
		 ul{
			 background-color:#f5f5f5;
			 padding:15px;
			 border: 1px solid #f0f0f0;
		 }
		 
		 li {
			 font-size:20px;
			 list-style :none;
			 padding:0px 0px 0px 30px;
			 background:url(/static/img/database_table.png);
			 background-size:20px 20px;
			 background-repeat:no-repeat;
		 }
		 
		 li a {
			 text-decoration:none;
			 color:#4CAF50;
		 }
		</style>
    </head>
    <body>
		<a href="\">index</a>
		<h1>{{.DbName}}</h1>
		<table>
			<caption>DB Info</caption>
			<thead>
				<tr>
					<th>property</th>
					<th>value</th>	  
				</tr>
			</thead>
			<tbody id="db_info">
			
			</tbody>
		</table>
		<ul>
			{{range .Cs}}
			<li><a href="/{{$.DbName}}/{{.}}">{{.}}</a></li>
			{{end}}
		</ul>
		<script type="text/javascript" src="/static/js/jquery-2.2.0.min.js"></script>
		<script type="text/javascript">
		 $(function(){
			 $.get("/json/{{.DbName}}/__status__", function(json){
				 var a = "<tr><td>{Name}</td><td>{Value}</td></tr>";
				 var names = ["avgObjSize","collections","dataSize","fileSize","indexSize","indexes","nsSizeMB","numExtents","objects","storageSize"];
				 var html = "";
				 for(i in names){
					 var key = names[i];
					 html = html + a.replace("{Name}",key).replace("{Value}",json[key]);
				 }
				 $("#db_info").append(html);
			 });
		 });
		</script>
    </body>
</html>
